<template>
    <div class="addVehicle-wrap vehicle">
        <!-- 已存在车辆 -->
        <div class="car-info" v-if="vehicleList.length !== 0">
            <div v-for="(items,index) in vehicleList" :key="items.id">
                <div class="clearfix top">
                    <div class="fl box" @click="carClick(items)">
                        <img class="fl" src="@/assets/img/icon/car.png" />
                        <div class="fl center">
                            <p>
                                <span>客户姓名：</span>
                                <span>{{items.username}}</span>
                            </p>
                            <p>
                                <span>号牌号码：</span>
                                <span>{{items.carNum}}</span>
                            </p>
                        </div>
                    </div>
                    <div class="fr">
                        <p @click="addCar(items,1)">修改信息</p>
                        <p @click="delCars(items,index)">删除车辆</p>
                    </div>
                </div>
                <div class="bottom clearfix">
                    <div class="fl">
                        <p>车辆类型</p>
                        <p>{{items.carType}}</p>
                    </div>
                    <span class="fl"></span>
                    <div class="fl">
                        <p>燃油类型</p>
                        <p>{{items.carFuel}}</p>
                    </div>
                    <span class="fl"></span>
                    <div class="fl">
                        <p>注册日期</p>
                        <!-- <p>{{getDate(items.createTime).o}}</p> -->
                        <p>{{items.carRegNum.substring(0,4)+'年'+items.carRegNum.substring(4,6)+'月'+items.carRegNum.substring(6)+'日'}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增车辆 -->
        <div class="add-box" @click="addCar(0,0)">
            <img src="@/assets/img/icon/add.png" />
            <p>点击添加车辆</p>
        </div>
        <foot :navUrl="url"/>
    </div>
</template>

<script>
    import { getDateStr, getDate } from '@/utils/index'
    import { getLocal, setLocal,delLocal} from '@/utils/storage'
    import foot from '@/views/footer.vue'
    export default {
        name: 'mycar',
        data() {
        return {
            vehicleList: [],
            carUser: JSON.parse(getLocal('userInfo')),
            conventionParams: {},
            timeArr: [],
            url:'home',
        }
    },
    created() {
    
        this.postCarInfo()
    },
    mounted() {
        document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
    },
    methods: {
        addCar(items, bol) {
            if (bol) {
                setLocal('edit','1')
                setLocal('info',items)
                if (items.typeTrailerBusiness) {
                    this.$router.push({
                        name: 'truck',
                    })
                }else{
                    this.$router.push({
                        name: 'vehicleDetails',
                    })
                }
            } else {
                delLocal('edit')
                delLocal('info')
                this.$router.push({
                    name: 'vehicleDetails',
                })
        
            }
        },
        // 查询车辆信息
        async postCarInfo() {
            let params = {
                userId: this.carUser.id
            }
            let res = await this.$api.PostCarInfo(params)
            console.log(res, '------------------- 查询车辆信息 ----------------')
            if (res) {
                if (res.status === 200) {
                    this.vehicleList = res.data.list 
                }
            }
      
        },
        // 删除车辆
        async delCarsFn(els, index) {
            let res = await this.$api.delCars({
                id: els.id
            })
            console.log(res, '------------------- 删除车辆 ----------------')
            if (res) {
                if (res.status === 200) {
                    this.vehicleList.splice(index, 1)
                }
            }
        },
        // 删除车辆
        delCars(els, index) {
            this.$dialog.confirm({
                title: '您确定要删除当前车辆信息吗？'
                // message: '弹窗内容'
            }).then(() => {
                this.delCarsFn(els, index)
            }).catch(() => {

            })
        },
        // 点击车辆
        carClick(items) {
            console.log('--------items---------',items)
            setLocal('edit','1')
            setLocal('info',items)
            if (items.typeTrailerBusiness) {
                this.$router.push({
                    name: 'truck',
                })
            }else{
                this.$router.push({
                    name: 'vehicleDetails',
                })
            }
            
        }
    },
    beforeRouteLeave(to, from, next) {
        document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
        next()
    },
    components:{
        foot
    }
}
</script>

<style lang="less" scoped>
body {
  background-color: #f5f6f5;
}
.addVehicle-wrap {
  .car-info .top .box {
    width: 70%;
    height: inherit;
  }
  .car-info{
    .top{
      .fr{
        p{
          font-size: 0.35rem;
          width: 2rem;
          height: 0.6rem;
          line-height: 0.6rem;
        }
      }
    }
  }
}
</style>
